<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="background-view-image">
					<u-swiper @click="handleDetail" keyName="content" imgMode="scaleToFill" height="240rpx"
						:list="bannerList" indicator indicatorMode="line" circular radius="24rpx"></u-swiper>
				</view>
				<view class="head_text">
					{{ classInfo.contentInfo }}
				</view>
				<view class="text_item">
					<view>正式会员可学习观看</view>
					<view></view>
					<view @click="handleView">查看</view>
				</view>
				<!-- 				<view class="text_body">
					<image src="../../static/imags/shu.png" class="text_body_image"></image>
					<view>随到随学</view>
					<view>已学</view>
					<view>{{ classInfo.studyPercent }}</view>
				</view> -->
				<view class="body_button">
					<view class="body_button_left" :class="active === '1' ? 'button_active' : ''" @click="change('1')">
						废纸学堂</view>
					<view class="body_button_right" :class="active === '2' ? 'button_active' : ''" @click="change('2')">
						废塑料学堂</view>
				</view>
				<view class="tag_container">
					<view class="other_tag" @tap="handleClick(2)" :class="['tag_item', { first_tag: isActive == 2 }]">
						{{ active == 1 ? '废纸138个品类学习' : '废塑料158个分类学习营' }}
					</view>
					<view class="other_tag" @tap="handleClick(1)" :class="['tag_item', { first_tag: isActive == 1 }]">
						降本增效经营学习</view>
				</view>
				<!-- <view class="quanbu">全部</view> -->
				<view class="list_wrap" v-if="classList.length > 0">
					<scroll-view style="height: 100%" :scroll-y="true" @scrolltolower="handleScroll">
						<view v-for="(item, index) in classList" :key="index" @tap="detail(item)" class="item_card">
							<image class="item_image" mode="aspectFill" :src="item.fileListPic[0].fileUrl"></image>
							<view class="item_right">
								<view class="item_info">
									<text class="item_title">{{ item.title }}</text>
								</view>
								<view class="miaoshu">
									{{ item.contentInfo }}
								</view>
								<view class="two">课程时长：{{ item.videoTime }}</view>
								<view class="th">
									<image class="date_image" src="../../static/images/time.png"></image>
									<view class="date">{{ item.pubTime }}</view>
									<text v-if="item.studyStatus == '1'" class="item_date1">未学习</text>
									<text v-else class="item_date">已学习</text>
								</view>
								<view class="fo">
									<view class="th">
										<image class="date_image" src="../../static/images/view.png"></image>
										<view class="date">{{ item.viewCount }}</view>
									</view>
									<view class="th">
										<image class="date_image" src="../../static/images/message.png"></image>
										<view class="date">{{ item.commentCount }}</view>
									</view>
									<view @tap.stop="handleCollect(item, index)" class="th">
										<image v-if="item.likeFlag == 0" class="date_image"
											src="../../static/images/collect.png"></image>
										<image v-else class="date_image" src="../../static/images/like1.png"></image>
										<view class="date">{{ item.likeCount }}</view>
									</view>
									<view class="th four">
										<image class="b-img" src="../../static/images/zhaunfa.png"></image>
										<button class="share-btn" @tap="handShareCountAdd(item, index)"
											open-type="share" @tap.stop>
											分享{{ item.shareCount == null ? 0 : item.shareCount }}
										</button>
									</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="status"></uni-load-more>
					</scroll-view>
				</view>
				<u-empty v-else mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import { mapState } from 'vuex'; // 关键导入
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				pageNum: 1,
				total: 0,
				status: 'more',
				bannerList: [],
				active: '1',
				isActive: 2,
				classInfo: {},
				classList: [],
				dataList: [],
				categoryList: [],
				pageTitle: '废纸废塑学堂',
				shareTile: '',
				shareTile: '',
				product: 2,
				items: [{
					title: '废纸学习标题',
					date: '2024.10.20',
					image: '../../static/imags/Frame_11.png',
					type: '1'
				}, {
					title: '废纸学习标题',
					date: '2024.10.20',
					image: '../../static/imags/Frame_11.png',
					type: '2'
				}, {
					title: '废纸学习标题',
					date: '2024.10.20',
					image: '../../static/imags/Frame_11.png',
					type: '2'
				}],
				tags: [{
					text: '综合'
				}, {
					text: '高档黄板废纸'
				}, {
					text: '普通黄板废纸'
				}, {
					text: '白废'
				}, {
					text: '特种废纸'
				}, {
					text: '特种废纸'
				}, {
					text: '特种废纸'
				}, {
					text: '特种废纸'
				}]
			};
		},
		onLoad() {
			this.getInfo();
			this.getBannerList();
			this.getClassList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTile, //分享的名称
				path: '/pages/study/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
				path: '/pages/study/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		methods: {
			//点击轮播图
			handleDetail(e) {
				console.log(e, 666);
				if (this.bannerList[e].clickUrl) {
					uni.navigateTo({
						url: `/page/detail/index?id=${this.bannerList[e].clickUrl}`
					});
				}
			},
			//触底加载更多
			handleScroll(e) {
				if (this.status == 'no-more') {
					return;
				} else {
					this.status = 'loading';
					this.pageNum++;
					this.getClassList();
				}
			},
			//增加分享次数
			handShareCountAdd(item, index) {
				this.shareTile = item.title;
				this.$https.post(this.$api.getShareCountAdd, {
					courseDetailId: item.id
				}).then((res) => {
					if (res.code === 200) {
						this.classList[index].shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//查看介绍
			handleView() {
				uni.navigateTo({
					url: `/page/introDetail/index?id=` + this.classInfo.id
				});
			},
			//获取轮播图
			getBannerList() {
				this.$https.post(this.$api.getBannerList, {
					bannerType: '8'
				}).then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 3,
					processType: item.likeFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						if (item.likeFlag == 0) {
							this.classList[index].likeFlag = '1';
							this.classList[index].likeCount++;
						} else {
							this.classList[index].likeFlag = '0';
							this.classList[index].likeCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//切换按钮
			change(index) {
				this.pageNum = 1;
				this.classList = [];
				this.active = index;
				this.isActive = 2;
				this.product = 2;
				this.getInfo();
				this.getClassList();
			},
			//获取废纸学堂信息
			getInfo() {
				this.$https.post(this.$api.getCourseInfo, {
					resourceType: this.active == 1 ? 1 : 2
				}).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classInfo = res.data;
						this.dataList = res.data.fileListPic;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点击品类
			handleClick(index) {
				this.pageNum = 1;
				this.classList = [];
				this.isActive = index;
				this.product = index;
				this.getClassList();
				// if (index == '2') {
				// } else {
				// 	this.getClassList(2);
				// }
			},
			//获取废纸课堂列表
			getClassList() {
				uni.showLoading({
					title: '加载中'
				});
				this.$https.post(this.$api.getClassList, {
					resourceType: this.active == 1 ? 1 : 2,
					product2: this.product,
					pageSize: 10,
					pageNum: this.pageNum
				}).then((res) => {
					if (res.code === 200) {
						this.total = res.total;
						this.classList = [...this.classList, ...res.data];
						if (res.data.length == 0 || res.total <= 20) {
							this.status = 'no-more';
						} else {
							this.status = 'more';
						}
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			detail(item) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				uni.navigateTo({
					url: `/page/study/detail?id=${item.id}&title=${item.title}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		height: 100%;

		.share-btn {
			font-size: 20rpx;
			width: 70rpx;
		}

		.my_container_body {
			width: 750rpx;
			border-radius: 0rpx;
			height: 100%;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				padding-top: 20rpx;
				width: 686rpx;
				height: calc(100% - 176rpx);
				margin-left: 32rpx;
				ont-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-style: normal;
				text-transform: none;
				display: flex;
				flex-direction: column;

				.body_button {
					margin-top: 20rpx;
					width: 686rpx;
					height: 90rpx;
					display: flex;
					display: flex;
					justify-content: space-between;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
					line-height: 90rpx;

					.body_button_left {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.body_button_right {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.button_active {
						background: #1ee825 !important;
						color: #ffffff !important;
					}
				}

				.head_image {
					width: 686rpx;
					height: 240rpx;
					// margin-top: 40rpx;
				}

				.head_text {
					width: 650rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #878787;
					line-height: 39rpx;
					margin-top: 36rpx;
					margin-left: 18rpx;
				}

				.text_item {
					display: flex;
					height: 56rpx;
					width: 686rpx;

					:nth-child(1) {
						width: 450rpx;
						height: 56rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #c30931;
						line-height: 56rpx;
						text-align: left;
						margin-left: 26rpx;
					}

					:nth-child(2) {
						width: 120rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #a8a8a8;
						height: 39rpx;
						margin-top: 17rpx;
						line-height: 39rpx;
						text-align: left;
						font-style: normal;
						text-decoration-line: line-through;
						text-transform: none;
					}

					:nth-child(3) {
						width: 158rpx;
						height: 56rpx;
						background: #19e820;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						ont-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 56rpx;
						text-align: center;
						margin-left: 232rpx;
					}
				}

				.text_body {
					width: 686rpx;
					height: 108rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 24rpx;
					display: flex;

					.text_body_image {
						height: 52rpx;
						width: 52rpx;
						margin-top: 28rpx;
						margin-left: 28rpx;
					}

					:nth-child(2) {
						width: 156rpx;
						height: 44rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 45rpx;
						text-align: left;
						margin-left: 10rpx;
						margin-top: 32rpx;
					}

					:nth-child(3) {
						margin-left: 300rpx;
						width: 60rpx;
						font-size: 28rpx;
						color: #777777;
						height: 40rpx;
						line-height: 40rpx;
						margin-top: 41rpx;
					}

					:nth-child(4) {
						width: 92rpx;
						height: 54rpx;
						line-height: 54rpx;
						height: 54rpx;
						margin-top: 27rpx;
						color: #19e820;
						font-size: 38rpx;
					}
				}

				.tag_container {
					width: 686rpx;
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-evenly;
					gap: 24rpx;

					.other_tag {
						background: #e9e9e9;
					}

					.tag_item {
						border-radius: 24rpx;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						font-size: 30rpx;
						padding: 0 22rpx;
						height: 54rpx;
						font-weight: 450;
						font-size: 30rpx;
						color: #333333;
						line-height: 54rpx;
					}

					.first_tag {
						font-weight: 600;
						background-color: transparent;
						height: 54rpx;
						list-style: 54rpx;
						color: #19e820;
						text-transform: none !important;
					}
				}

				.quanbu {
					margin-top: 26rpx;
					width: 68rpx;
					height: 48rpx;
					font-weight: 550;
					font-size: 34rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: left;
				}

				.list_wrap {
					height: calc(100% - 492rpx);
					padding-bottom: 40rpx;
					overflow: hidden;
				}

				.item_card {
					margin-top: 20rpx;
					width: 686rpx;
					height: 272rpx;
					background: #ffffff;
					border-radius: 24rpx;
					display: flex;
					flex-direction: row;
					overflow: hidden;

					.item_image {
						width: 212rpx;
						height: 232rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-top: 20rpx;
						margin-left: 20rpx;
					}

					.item_right {
						margin-left: 24rpx;
						height: 212rpx;
						margin-top: 20rpx;
						width: 430rpx;

						.item_info {
							display: flex;
							height: 53rpx;

							.item_title {
								// width: 312rpx;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								height: 53rpx;
								line-height: 53rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}

						.miaoshu {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.two {
							height: 53rpx;
							line-height: 53rpx;
							display: flex;
							color: #777777;
							font-size: 24rpx;
						}

						.th {
							height: 53rpx;
							line-height: 53rpx;
							display: flex;
							align-items: center;

							.date_image {
								width: 36rpx;
								height: 36rpx;
								margin-top: 8.5rpx;
							}

							.date {
								height: 53rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 53rpx;
								text-align: left;
								margin-left: 10rpx;
							}

							.item_date {
								margin-left: 20px;
								width: 88rpx;
								height: 34rpx;
								background: #ffecec;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #ff3939;
								line-height: 34rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							.item_date1 {
								margin-left: 20px;
								width: 88rpx;
								height: 34rpx;
								background: #5fff2e;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #359409;
								line-height: 34rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}
						}

						.fo {
							height: 53rpx;
							line-height: 53rpx;
							display: flex;
							justify-content: space-between;

							.th {
								width: 22%;
							}

							:nth-child(4) {
								width: 36%;
							}

							.four {
								width: 140rpx;
								position: relative;
								display: flex;
								align-items: center;

								.b-img {
									width: 40rpx;
									height: 40rpx;
								}

								.share-btn {
									width: 100%;
									background-color: transparent;
									padding-left: 45rpx;
									position: absolute;
									font-size: 22rpx;
									top: 0;
									text-align: left;
								}
							}
						}
					}
				}
			}
		}
	}
</style>